<template>
  <common-card title="累计订单量" :value="orderToday">
    <template>
      <v-chart :options="getOptions()"></v-chart>
      <!-- <div
        id="total-orders-chart"
        :style="{ width: '100%', height: '100%' }"
      ></div> -->
    </template>
    <template v-slot:footer>
      <span>昨日订单量 </span>
      <span class="emphasis">{{ orderLastDay }}</span>
    </template>
  </common-card>
</template>

<script>
import commonCardMixin from '../../mixins/commonCardMixin'
import comminDataMixin from '../../mixins/comminDataMixin'
export default {
  mixins: [commonCardMixin, comminDataMixin],
  methods: {
    getOptions() {
      const orderTrendData = {
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false // 默认 距离 x有一点距离
        },
        yAxis: {
          show: false
        },
        series: [
          {
            type: 'line', // 系列图表类型
            data: this.orderTrend,
            areaStyle: {
              color: 'purple'
            },
            smooth: true,
            lineStyle: {
              width: 0
            },
            itemStyle: {
              opacity: 0
            }
          }
        ],
        grid: {
          // 排列方式
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        }
      }

      return this.orderTrend.length > 0 ? orderTrendData : null
    }
  },
  mounted() {
    // const chartDom = document.getElementById('total-orders-chart')
    // const echart = this.$echarts.init(chartDom)
    // echart.setOption({
    //   xAxis: {
    //     type: 'category',
    //     show: false,
    //     boundaryGap: false // 默认 距离 x有一点距离
    //   },
    //   yAxis: {
    //     show: false
    //   },
    //   series: [
    //     {
    //       type: 'line', // 系列图表类型
    //       data: [
    //         620,
    //         432,
    //         564,
    //         355,
    //         723,
    //         336,
    //         456,
    //         620,
    //         432,
    //         564,
    //         355,
    //         723,
    //         336,
    //         456,
    //         776
    //       ],
    //       areaStyle: {
    //         color: 'purple'
    //       },
    //       smooth: true,
    //       lineStyle: {
    //         width: 0
    //       },
    //       itemStyle: {
    //         opacity: 0
    //       }
    //     }
    //   ],
    //   grid: {
    //     // 排列方式
    //     top: 0,
    //     bottom: 0,
    //     left: 0,
    //     right: 0
    //   }
    // })
  }
}
</script>

<style scoped>
</style>
